* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
}

.container {
	height: 100%;
	background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.login-wrapper {
	background-color: #fff;
	width: 358px;
	height: 588px;
	border-radius: 15px;
	padding: 0 50px;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.header {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	line-height: 150px;
}

.input-item {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	border: 0;
	padding: 10px;
	border-bottom: 1px solid rgb(128, 125, 125);
	font-size: 15px;
	outline: none;
}

.input-item:placeholder {
	text-transform: uppercase;
}

.btn {
	text-align: center;
	padding: 10px;
	width: 100%;
	margin-top: 40px;
	background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
	color: #fff;
}

.msg {
	text-align: center;
	line-height: 88px;
}

.choose {
	display: flex;
	/*让元素垂直排列*/
	flex-direction: row;
	color: rgb(128, 125, 125);
}

.choose label {
	display: flex;
	/*鼠标移入变小手*/
	cursor: pointer;
}

.choose label input {
	/*隐藏元素 先显示出来*/
	display: none;
}

/* + 是相邻兄弟的选择器*/
.choose label input+span {
	display: flex;
	/*让伪元素和文字水平排列*/
	align-items: center;
	padding: 15px 30px;
	margin-bottom: 1px;
	font-size: 16px;
	/* background-repeat: 90px; */
	transition: all 0.3s;
}

.choose label input+span::before {
	content: "";
	/*伪元素是行内元素 需要转为块级元素才能设置宽高*/
	display: block;
	width: 20px;
	height: 20px;
	/*圆角属性*/
	border-radius: 50%;
	margin-right: 15px;
	background-color: #fff;
	/*盒子阴影 inset是内部阴影*/
	box-shadow: 0 0 0 5px #a6c1ee inset;
	/*加上过渡时间*/
	transition: all 0.3s;
}

.choose label input:checked+span::before {
	/*选中的元素的内部阴影加深*/
	box-shadow: 0 0 0 15px #fbc2eb inset;
}